<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ page isELIgnored="false"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>login</title>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3" />
<meta http-equiv="description" content="This is my page" />
<script type="text/javascript" src="<%=path%>/js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="<%=path%>/js/jquery.easydrag.handler.beta2.js"></script>
<script type="text/javascript" src="<%=path%>/js/jquery.overblock-1.2.js"></script>
<script type="text/javascript" src="<%=path%>/js/u/constant.js"></script>
<script type="text/javascript" src="<%=path%>/js/u/msg.js"></script>
<link rel="stylesheet" type="text/css" href="<%=path%>/css/style.css" />

<script type="text/javascript">
	jQuery(function() {
		var height = screen.availHeight || screen.height;
		var divHeight = jQuery('div#loginDiv').height();
		var margin = (height - divHeight - 100) / 2;
		
		var marginTime = 2000;

		jQuery('#userName').focus();
		jQuery('div#loginDiv').css(
			{
				'-webkit-transition' : 'margin ' + marginTime + 'ms cubic-bezier(0.19, 1, 0.22, 1) 10ms, opacity 1000ms cubic-bezier(0.25, 0.25, 0.75, 0.75) 10ms, box-shadow 1000ms cubic-bezier(0.42, 0, 0.58, 1) 10ms',
				'-moz-transition' : 'margin ' + marginTime + 'ms cubic-bezier(0.19, 1, 0.22, 1) 10ms, opacity 1000ms cubic-bezier(0.25, 0.25, 0.75, 0.75) 10ms, box-shadow 1000ms cubic-bezier(0.42, 0, 0.58, 1) 10ms',
			  	'-o-transition' : 'margin ' + marginTime + 'ms cubic-bezier(0.19, 1, 0.22, 1) 10ms, opacity 1000ms cubic-bezier(0.25, 0.25, 0.75, 0.75) 10ms, box-shadow 1000ms cubic-bezier(0.42, 0, 0.58, 1) 10ms',
			  	'transition' : 'margin ' + marginTime + 'ms cubic-bezier(0.19, 1, 0.22, 1) 10ms, opacity 1000ms cubic-bezier(0.25, 0.25, 0.75, 0.75) 10ms, box-shadow 1000ms cubic-bezier(0.42, 0, 0.58, 1) 10ms',
				'margin' : margin + 'px auto',
				'opacity' : '1'
			}		
		);
		
		jQuery('div.inputTitleDiv').each(function() {
			var tip = $(this);
			var input = tip.next('input');
			
			var tipValue = tip.html();
			
			input.keyup(function() {
				var inputValue = $(this).val();
				if(inputValue && inputValue.length > 0) {
					tip.html('&nbsp;');
				} else {
					tip.html(tipValue);
				}
			});
		});
	});
</script>
<style type="text/css">
body{
	width : 100%;
	height : 100%;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	border: none;
	font: normal 16px/normal "Comic Sans MS", cursive, sans-serif;
	color: rgba(255,255,255,1);
	text-align: center;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	background: rgba(204,216,224,0.81);
}

#loginDiv{
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	width: 500px;
	height: 350px;
	margin: 850px auto;
	-webkit-border-radius: 2px;
	border-radius: 5px;
	color: rgba(255,255,255,1);
	text-align: center;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	background: #486373;
	-webkit-box-shadow: 0 0 45px 4px rgba(0,0,0,0.5) ;
	box-shadow: 0 0 45px 4px rgba(0,0,0,0.5) ;
	-webkit-transition: margin 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 10ms, all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
	-moz-transition: margin 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 10ms, all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
	-o-transition: margin 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 10ms, all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
	transition: margin 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 10ms, all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
	opacity : 0;
}
div.itemLine{
	margin : 20px;
}
input.inputStyle{
	display: inline-block;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	width: 220px;
	height: 30px;
	padding: 10px 20px 10px 40px;
	border: 1px solid rgba(249,244,244,1);
	-webkit-border-radius: 3px;
	border-radius: 3px;
	color: black;
	font-weight : bold;
	-o-text-overflow: clip;
	text-overflow: clip;
	font-size : 20px;
	-webkit-box-shadow: 0 0 0 0 rgba(0,0,0,0.2) inset;
	box-shadow: 0 0 0 0 rgba(0,0,0,0.2) inset;
	text-shadow: 0px 0px 5px rgba(255,255,255, 1) ;
	-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
	-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
	-o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
	transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
	letter-spacing : 1px;
}
div.inputTitleDiv{
	padding-left : 134px;
	margin-bottom : -44px;
	text-align : left;
	font-size : 30px;
	color : #6C8EA3;
}
input.buttonType{
	display: inline-block;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	width: 240px;
	height: 33px;
	cursor: pointer;
	padding: 10px 20px;
	color: #547487;
	border: 1px solid #547487;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	text-align: center;
	-o-text-overflow: clip;
	text-overflow: clip;
	background: #486373;
	-webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
	-moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
	-o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
	transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
	font: normal 20px/normal "Comic Sans MS", cursive, sans-serif;
}
input.buttonType:hover{
	color: rgba(255,255,255, 1);
	background-color : #384D5A;
	border: 1px solid #f7fbfc;
}
#userName{
	background: rgba(239,244,247,0.1) url(../js/user.png) 5px 8px no-repeat;
	background-size: 32px 32px;
}

#password{
	background: rgba(239,244,247,0.1) url(../js/padlock.png) 5px 7px no-repeat;
	background-size: 34px 33px;
}
</style>
</head>
<body>
	
	<div id="loginDiv">
		<div style="padding : 0px;">
			<div class="itemLine">
				<div style="padding-top : 40px; font-size : 20px;">
					login system
				</div>
			</div>
			<div class="itemLine">
				<div class="inputTitleDiv">
					account
				</div>
				<input id="userName" class="inputStyle" type="text" />
			</div>
			<div class="itemLine">
				<div class="inputTitleDiv">
					password
				</div>
				<input class="inputStyle" id="password" type="password" />
			</div>
			<div class="itemLine" style="border-top : 1px solid #58798D; padding-top : 20px;">
				<input type="button" class="buttonType" value="confirm login" />
			</div>
		</div>
	</div>
</body>
</html>
